<template>
    <div class="container-fluid">
        <div class="row justify-content-end">
            <!-- 左边内容 -->
            <div class="col-lg-3  leftCon  border-right ">
                <!-- 导航栏 -->
                <header class="navbar  d-sm-flex d-xs-flex px-0  py-3 py-lg-4">
                    <a href="#" class="navbar-brand"><img src="../assets/images/logo.png" alt="" width="36"></a>
                    <ul class="nav mr-auto">
                        <li class="nav-item">
                            <a href="#" class="nav-link text-dark font-weight-bold">门店</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link text-dark font-weight-bold">我的账户</a>
                        </li>
                        <li class="nav-item">
                            <a href="javascript:void(0)" class="nav-link text-dark font-weight-bold" @click="controlMenu()">菜单</a>
                        </li>
                    </ul>
                    <span class="iconfont icon-menu" id="showBtn" ref="showBtn"  @click='show=!show'></span>
                </header>

                <!-- 标题与登录注册 -->
               

                 <div class="col-12 foodMenu" v-if="menu">
                        <ul class="row list-unstyled justify-content-around px-5">
                            <li class="col-6 col-md-6" v-for="(item,index) in foodList" :key="index"> 
                                <a href="javascript:void(0)"  class="text-center px-2 bg-white rounded d-inline-block position-relative" @click="goFoodDetail(index)">
                                    <img :src="item.src" class="img-fluid img-thumbnail rounded" alt="">
                                    <h4 class="my-2 text-dark font-weight-bold">{{item.name}}</h4>
                                </a>
                            </li>
                        </ul>
                    <div class=" align-items-center login" v-if="menu">
                    <div class="px-0 px-lg-5  " >
                        <h1 class="font-weight-bold py-3">来吃碗竹升面吧！！！ <span class="iconfont icon-noodle"></span></h1>
                        <div class="d-none d-sm-block my-3">
                            <a href="http://i.waimai.meituan.com/external/poi/1029539289006256?utm_source=5913&amp;wmi_from=cpoiinfo&amp;user_id=302055107&utm_term=AiphoneBgroupC12.5.405DcopyEwm-restautantG00000000000006B25023F5BFA44AB8FED1E9648D5A259A16645016029040170220221228105637202&utm_source=appshare&utm_medium=iOSweb&utm_fromapp=copy&utm_sharesource=wm-restautant&lch=appshare_a95993f6ee20ff54A5" class="text-eat">
                                <span class="iconfont icon-denglu"></span>
                                <span>来点一碗吧</span>
                            </a>
                        </div>
                    </div>
                </div>
                    </div>

                



                <!-- 点击菜单后要展示的内容 -->
                <div class="d-flex bg-white flex-column justify-content-between position-absolute menu" v-if='show'>
                    <header class="navbar d-flex px-0 px-lg-3 py-3 py-lg-4">
                        <a href="#" class="navbar-brand"><img src="../assets/images/logo.png" alt="" width="36"></a>
                        <span class="iconfont icon-guanbi" id="closeBtn" @click="show=!show"></span>
                    </header>
                    <div class="list">
                        <ul class="list-unstyled mx-sm-5 pl-sm-5">
                            <li><a href="#" class="font-weight-bold text-dark py-2 d-block">门店</a></li>
                            <li><a href="#" class="font-weight-bold text-dark py-2 d-block">云记俱乐部（敬请期待）</a></li>
                            <li><router-link class="font-weight-bold text-dark py-2 d-block" :to="{ name: 'Contact' }"> 招募</router-link></li>

                            <hr>
                            <li><router-link class="font-weight-bold text-dark py-2 d-block" :to="{ name: 'FoodDetail', query: { foodDetailid:0 } }"> 狮头饺竹升面</router-link></li>
                            <li><router-link class="font-weight-bold text-dark py-2 d-block" :to="{ name: 'FoodDetail', query: { foodDetailid:0 } }"> 海鲜竹升面</router-link></li>
                            <li><router-link class="font-weight-bold text-dark py-2 d-block" :to="{ name: 'FoodDetail', query: { foodDetailid:0 } }"> 炸酱竹升面</router-link></li>
                            <li><router-link class="font-weight-bold text-dark py-2 d-block" :to="{ name: 'FoodDetail', query: { foodDetailid:0 } }"> 牛腩竹升面</router-link></li>
                            <hr>
                        </ul>
                        <div class="my-3 mx-sm-5 pl-sm-5 font">
                            <a href="#" class="text-warning">
                                <span class="iconfont icon-denglu"></span>
                                <span>登录</span>
                            </a>
                            <a href="#" class="btn btn-outline-warning ml-4 register">注册</a>
                        </div>
                    </div>
                    <footer class="mx-sm-5 pl-sm-5 pb-5">
                        <div>
                            <a href="#">English</a> | <a href="#">隐私政策</a> | <a href="#">使用条款</a> |
                        </div>
                        <div>
                            <a href="#"><img src="../assets/images/icpicon.png" width="10" height="10" alt="">沪公网安备
                                31010402000318号</a> | <a href="#">沪ICP备17003747号</a>
                        </div>
                    </footer>
                </div>

            </div>

            <!-- 右边内容 -->
            <div class="col-lg-9 bg-light">
                <!-- 轮播图 -->
                <div class="row">
                    <div class="carousel slide carousel-dark" id="pic" data-bs-ride='carousel'>
                        <div class="carousel-indicators">
                        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
                        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
                        
                    </div>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="../assets/images/宣传图2.jpg" class="d-block w-100" alt="">
                            </div>
                            <div class="carousel-item">
                                <img src="../assets/images/宣传图3.png" class="d-block w-100" alt="">
                            </div>
                             <div class="carousel-item">
                                <img src="../assets/images/宣传图4.jpg" class="d-block w-100" alt="">
                            </div>
                                
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#pic" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                         </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#pic" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                        </button>
                      
                    </div>
                </div>

                   <div class="row pb-5 betters">
                    <!-- 标题 -->
                    <div class="col-12 text-center">
                        <h3 class="my-4 text-dark">精选</h3>
                        <p class="text-muted">在云记竹升面发现更多心意</p>
                    </div>

                    <!-- 四块内容 -->
                    <div class="col-12">
                        <ul class="row list-unstyled justify-content-around px-5">
                            <li class="col-6 col-md-3">
                                <a href="javascript:void(0)"  class="text-center px-2 bg-white rounded d-inline-block position-relative" @click="goFoodDetail(0)">
                                    <img src="../assets/images/狮头饺2.png" class="img-fluid img-thumbnail rounded" alt="">
                                    <h4 class="my-2 text-dark font-weight-bold">狮头饺竹升面</h4>
                                    <p class="text-muted">云记<br>用心制作</p>
                                </a>

                            </li>
                            <li class="col-6 col-md-3">
                                <a href="javascript:void(0)" class="d-inline-block text-center px-2 bg-white rounded postion-relative" @click="goFoodDetail(1)">
                                    <img src="../assets/images/海鲜面.png" class="img-fluid img-thumbnail rounded" alt="">
                                    <h4 class="my-2 text-dark font-weight-bold">海鲜竹升面</h4>
                                    <p class="text-muted">云记新升级<br>更多心意好礼</p>
                                    <!-- <p class="caption">了解更多 ›</p> -->
                                </a>
                            </li>
                            <li class="col-6 col-md-3">
                                <a href="javascript:void(0)" class="text-center px-2 bg-white rounded d-inline-block position-relative" @click="goFoodDetail(2)">
                                    <img src="../assets/images/炸酱面.png" class="img-fluid img-thumbnail rounded" alt="">
                                    <h4 class="my-2 text-dark font-weight-bold">炸酱竹升面</h4>
                                    <p class="text-muted">用一份心礼<br>让心意相随</p>
                                    <!-- <p class="caption">了解更多 ›</p> -->
                                </a>
                            </li>
                            <li class="col-6 col-md-3">
                                <a href="javascript:void(0)" class="text-center px-2 bg-white rounded d-inline-block position-relative" @click="goFoodDetail(3)">
                                    <img src="../assets/images/牛腩面.png" class="img-fluid img-thumbnail rounded" alt="">
                                    <h4 class="my-2 text-dark font-weight-bold">牛腩竹升面</h4>
                                    <p class="text-muted">心意<br>从这一碗开始</p>
                                    <!-- <p class="caption">了解更多 ›</p> -->
                                </a>
                            </li>
                            
                        </ul>
                    </div>
                </div>

                <!-- 咖啡星讲堂 -->
                <div class="row bg-white overflow-hidden mb-5 pb-5 teah">
                    <!-- 标题 -->
                    <div class="col-12 text-center">
                        <h3 class="my-4 text-dark">2022 云记 | 竹升面讲堂</h3>
                        <p class="text-muted">了解更多竹升面文化</p>
                    </div>

                    <!-- 滚动内容 -->
                    <div class="col-12">
                        <div class="scroll pl-3 " >
                            <ul class="list-unstyled d-flex justify-content-between">
                                <li class="card" v-for="(item, index) in videoList" :key="index" >
                                    <a href="javascript:void(0)" @click="openVideo(index)" @mouseenter="playVideo(index)" @mouseleave="pauseVideo(index)">
                                        <!-- 遮罩层 -->
                                        <div class="fixed">
                                            <div class="banner-btn">点击观看</div>
                                        </div>
                                        <!-- <img src="../assets/images/img_01.jpg" class="card-img-top" alt=""> -->
                                        <video :src="item.videoSrc" class="card-img-top" alt="" muted :ref="setVideoRef"  />
                                    </a>
                                    <div class="card-body">
                                        <h4 class="card-title mb-0">{{item.title}}</h4>
                                    </div>
                                    <span class="position-absolute text-white px-3 py-1">{{item.span}}</span>
                                </li> 
                            </ul>
                        </div>
                    </div>
                </div>



                <!-- 三张图片 -->
                <div class="row py-4 betters">
                    <!-- 标题 -->
                    <div class="col-12 text-center">
                        <h3 class="my-4 text-dark">招募</h3>
                        <p class="text-muted">加入云记竹升面体会爱的传递</p>
                    </div>
                    <div class="col-sm-4 my-2 my-sm-0">
                        <a href="#">
                            <img src="../assets/images/店面.png" class="img-fluid img-thumbnail" alt="">
                        </a>
                    </div>
                    <div class="col-sm-4 my-2 my-sm-0">
                        <a href="#">
                            <img src="../assets/images/店面.png" class="img-fluid img-thumbnail" alt="">
                        </a>
                    </div>
                    <div class="col-sm-4 my-2 my-sm-0">
                        <!-- <a href="#">
                        </a> -->
                        <router-link :to="{ path: 'contact' }">
                            <img src="../assets/images/招募.png" class="img-fluid img-thumbnail" alt="">
                        </router-link>
                    </div>
                </div>



                <!-- 星享俱乐部 -->
                <div class="row p-5 bg-white align-items-center text-center text-sm-left start betters">
                    <!-- 标题 -->
                    <div class="col-12 text-center">
                        <h3 class="my-4 text-dark">精选</h3>
                        <p class="text-muted">在云记竹升面发现更多心意</p>
                    </div>
                    <div class="col-sm-5">
                        <h2>云记俱乐部</h2>
                        <p class="py-3 text-muted">开启您的乐享VIP之旅<a href="#">  了解更多 ›</a></p>
                        <div>
                            <button class="btn btn-outline-warning btn-lg">注册</button>
                            <button class="btn btn-outline-warning btn-lg">登录</button>
                        </div>
                    </div>
                    <div class="col mt-5 mt-sm-0 text-sm-right">
                        <img src="../assets/images/VIP.png" class="img-fluid" alt="">
                    </div>
                </div>

            
                <footer class="py-5">
                    <div class="container pt-md-5">
                    <hr/>
                    <div class="footer-grid">
                        <div class="w3l-copyright text-center">
                        <div class="social text-center">
                            <ul class="d-flex justify-content-center">
                            <li class="mx-md-2 mx-1"><a href="#url" class="dy"><span class="iconfont icon-douyin"></span></a></li>
                            <li class="mx-md-2 mx-1"><a href="#url" class="mt"><span class="iconfont icon-meituan"></span></a></li>
                            <li class="mx-md-2 mx-1"><a href="#url" class="wx"><span class="iconfont icon-weixingongzhonghaoguanli"></span></a></li>
                            <li class="mx-md-2 mx-1"><a href="#url" class="wb"><span class="iconfont icon-weibo"></span></a></li>
                            
                            </ul>
                        </div>
                        <p class="mt-4"><a href="#"><img src="../assets/images/icpicon.png" width="10" height="10" alt="">粤公网安备
                                31010402000318号</a> | <a href="#">粤ICP备17003747号</a></p>
                        </div>
                    </div>
                    </div>
  </footer>
             

            </div>
        </div>
    </div>


    <!-- 视频展示区域 -->
     <div class="mask" v-if="showVideo">
        <div class="show">

            <button class="close " @click="closeVideo">
                <span class="iconfont icon-guanbi2"></span>
            </button>
             <video  :src="video" controls autoplay class="pArea" >
            </video>

        </div>
    </div>
</template>

<script setup >
import '../assets/css/home.css'
import '../assets/css/iconfont.css'
import { ref,getCurrentInstance,onMounted} from "vue";
import { useRouter,useRoute } from 'vue-router'
const imageUrl="http://119.23.227.231:5000/"
const router = useRouter()
// 菜单
const show=ref(false)
//视频框
const showVideo=ref(false)
const video=ref(imageUrl+"/video/云记介绍.mp4")
const videoList=[
    {
        videoSrc:imageUrl+"/video/汤底.mp4",
        title:"广式茶餐厅",
        span:"竹升面制作"
    },{
        videoSrc:imageUrl+"/video/汤底.mp4",
        title:"汤底调制",
        span:"汤底的调制"
    },{
        videoSrc:imageUrl+"/video/云记介绍.mp4",
        title:"香港文化",
        span:"云记餐厅知识"
    },{
        videoSrc:imageUrl+"/video/云记介绍.mp4",
        title:"竹升面制作",
        span:"广式茶餐厅"
    },]
const myVideos=ref([])
const openVideo=(src)=>{
    showVideo.value=true
    video.value=videoList[src].videoSrc
}

const closeVideo=()=>{
    showVideo.value=false
    video.value=""
}

const playVideo=(index)=>{
    
    // myVideo.play()
    myVideos.value[index].play()
}

const pauseVideo=(index)=>{
    myVideos.value[index].currentTime=0;
    myVideos.value[index].pause()
}

const setVideoRef = (el) => {
     
      myVideos.value.push(el);
    };



const goFoodDetail=(id)=>{
    sessionStorage.setItem('foodDetailid',id )
    router.push({
          name: 'FoodDetail',
          query:{
              foodDetailid:id
          }
    })
}


// 菜单
var menu=ref(true)
const foodList=ref([
    {
        name:"狮头饺竹升面",
        src:imageUrl+"/images/狮头饺2.png"
    },
      {
        name:"海鲜竹升面",
        src:imageUrl+"/images/海鲜面.png"
    },
      {
        name:"炸酱竹升面",
        src:imageUrl+"/images/炸酱面.png"
    },
      {
        name:"牛腩竹升面",
        src:imageUrl+"/images/牛腩面.png"
    },
     {
        name:"云吞竹升面",
        src:imageUrl+"/images/云吞面1.png"
    },
      {
        name:"猪油捞面",
        src:imageUrl+"/images/猪油捞面.png"
    }
])

onMounted(() => {
  getWindowResize()
  window.addEventListener('resize', getWindowResize)
})

const getWindowResize = function () {
  
  if (window.innerWidth<992){
      if(menu){
        menu.value=false
      }
  }else{
     menu.value=true 
  }
}

const controlMenu=()=>{
    console.log(window.innerWidth);
    if(window.innerWidth>=992){
        menu.value=true
    }else{
        menu.value=!menu.value
        
    }
}


</script>

<style scoped>

</style>